<template>
	<view>
		<view class="IncomeDetailsBox">
			<view>
				<view>累计提成收入</view>
				<view class="number">¥{{Total_bonus_income}}</view>
			</view>
			<view>
				<view>当日提成收入</view>
				<view class="number">¥{{current_day_number}}</view>
			</view>
			<view>
				<view>时间段内提成收入</view>
				<view class="number">¥{{deta_bonus_income}}</view>
			</view>
		</view>
		<view class="searchBox">
			<view class="dateBox">
				<picker mode="date" :value="startTime" @change="bindTimeChange_start">
					<view class="uni-input">{{startTime}}</view>
				</picker>
			</view>
			<view class="dateMiddleBor">~</view>
			<view class="dateBox">
				<picker mode="date" :value="EndTime" start="09:01" end="21:01" @change="bindTimeChange_end">
					<view class="uni-input">{{EndTime}}</view>
				</picker>
			</view>
			<view class="searchButton">
				查询
			</view>
		</view>
		<view class="listBox">
			<view class="listItemBox" v-for="(ele,ind) in bonusincomeList" :key="ind">
				<view>
					<view>账户类型</view>
					<view>{{ele.ACCOUNT_NAME}}</view>
				</view>
				<view>
					<view>收入时间</view>
					<view>{{ele.OPT_TIME}}</view>
				</view>
				<view>
					<view>收入金额</view>
					<view>{{ele.OPT_AMOUNT}}</view>
				</view>
				<view>
					<view>操作前金额</view>
					<view>{{ele.BEFORE_OPT_AMOUNT}}</view>
				</view>
				<view>
					<view>操作后金额</view>
					<view>{{ele.AFTER_OPT_AMOUNT}}</view>
				</view>
				<view>
					<view>备注</view>
					<view>{{ele.MEMO}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getMemberDailyOptAmount
	} from '@/api/directSelling.js';
	export default {
		data() {
			return {
				startTime: "",
				EndTime: "",
				bonusincomeList: [],
				Total_bonus_income:0,
				deta_bonus_income:0,
				current_day_number:0
			}
		},
		created() {
			this.getDate();
			this.getMemberDailyOptAmount();
		},
		methods: {
			bindTimeChange_start(e) {
				this.startTime = e.detail.value;
				this.getMemberDailyOptAmount();
			},
			bindTimeChange_end(e) {
				this.EndTime = e.detail.value;
				this.getMemberDailyOptAmount();
			},
			getMemberDailyOptAmount(){
				getMemberDailyOptAmount({
					startDate: this.startTime+ ' 00:00:00',
					endDate: this.EndTime+ ' 23:59:59'
				}).then((res)=>{
					let data=res.data;
					this.Total_bonus_income=res.data.sum;
					this.deta_bonus_income=res.data.daily;
					this.bonusincomeList=data.detail;
				}).catch((err)=>{
					console.log("测试报错");
				})
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				let nowTime=`${year}-${month}-${day}`;
				this.startTime=nowTime;
				this.EndTime=nowTime;
			}
		}
	}
</script>

<style lang="scss">
	body,
	page {
		background: #fff;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
	}

	.IncomeDetailsBox {
		position: relative;

		>view {
			height: 120rpx;
			border: 1px solid #E5E5E5;
			border-radius: 15rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 30rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			border-left: 10rpx solid #FC316C;
			font-weight: bold;

			.number {
				font-size: 35rpx;
			}
		}

		>view:nth-child(2) {
			border-left: 10rpx solid #FD940B;
		}

		>view:nth-child(3) {
			border-left: 10rpx solid #00ff00;
		}
	}

	.searchBox {
		height: 100rpx;
		width: 100%;
		padding: 20rpx 0;
		box-sizing: border-box;

		>view {
			display: inline-block;
			vertical-align: middle;
		}

		.dateBox {
			width: calc((100% - 70rpx - 150rpx) /2);
			border: 1px solid #ccc;
			height: 100%;
			border-radius: 15rpx;
			padding: 0 15rpx;
			box-sizing: border-box;

			uni-picker {
				width: 100%;
				height: 100%;

				.uni-input {
					height: 100%;
					line-height: 58rpx;
				}
			}
		}

		.dateMiddleBor {
			width: 70rpx;
			text-align: center;
			height: 100%;
			font-size: 60rpx;
			line-height: 60rpx;
		}

		.searchButton {
			width: 130rpx;
			height: 100%;
			margin-left: 15rpx;
			text-align: center;
			background: #007AFF;
			line-height: 60rpx;
			border-radius: 20rpx;
			color: #fff;
		}
	}

	.listBox {
		.listItemBox {
			width: 100%;
			height: auto;
			box-shadow: 0px 0px 10px #e6e6e6;
			margin-bottom: 30rpx;
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			border-radius: 20rpx;

			>view {
				height: 80rpx;
				line-height: 80rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}
	}
</style>
